.list-group, .table {
  color: $gray-800;
}

#filters-search-bar {
  max-width: 300px;
  margin-right: auto;
}

table.table {
  margin-bottom: 0;

  th {
    border-top: 0;
    @extend .text-nowrap;
    border-bottom: 0;

    &.handel-head {
      width: 50px;
    }
    a.sort_link {
      white-space: nowrap;
    }
  }

  td.move-handle {
    width:45px;
  }

  td > a:not(.btn):not(.text-primary) {
    @extend .text-dark;
  }

  thead {
    th {
      background-color: $light;
      @extend .text-muted;
      font-size: $font-size-sm;
      font-weight: $font-weight-medium;
      vertical-align: middle;
      padding-top: 0.45rem;
      padding-bottom: 0.45rem;
    }
    th:first-child {
      border-top-left-radius: $card-border-radius;
    }
    th:last-child {
      border-top-right-radius: $card-border-radius;
    }
  }

  tbody {
    tr {
      td {
        vertical-align: middle;
        .filterable {
          margin-left: .2em;
          cursor: pointer;
          width: 0.9rem;
          height:0.9rem;
          opacity: 0.25;
          &:hover {
            opacity: 1;
          }
        }

        a:hover {
          text-decoration: none;
        }
      }

      &.active {
        td {
          background-color: theme-color('action');
          border-color: theme-color('action-border');
        }
      }
    }

    tr:hover:not(.active):not(.sortable-chosen) {
      td {
        background-color: rgba($gray-25, 0.75);
      }
    }

    tr:last-child {
      td:first-child {
        border-bottom-left-radius: $card-border-radius;
      }
      td:last-child {
        border-bottom-right-radius: $card-border-radius;
      }
    }
  }

  tr > td:first-child, tr > th:first-child {
    padding-left: 1rem;
  }
  tr > td:last-child, tr > th:last-child {
    padding-right: 1rem;
  }
}

.table-active-filters {
  padding: 0.75rem;

  &:not(:has(:first-child)) {
    display: none;
  }

  .js-filter {
    .icon {
      cursor: pointer;
    }
  }

  .badge-secondary {
    .icon {
      filter: invert(1);
    }
  }

  .badge {
    display: inline-block;
    margin-right: .5em;
    margin-bottom: .5em;

    &:hover {
      opacity: .8;
    }
  }
}

.table-responsive tr td, .table-responsive tr th {
  white-space: nowrap;
}

.table-responsive.border {
  border-color: $table-border-color !important;
}

.table-responsive:has(.dropdown.show) {
  overflow: visible;
}

.sortable-drag-v {
  border: 1px solid theme-color('info');
  border-radius: $border-radius;
  width:100%;
  text-align: right;
  opacity: 0;
  td {
    border-top: none;
    opacity:0;
    &:first-child {
    opacity: 1;
    }
  }
}

td.actions {
  @extend .text-right;

  .btn {
    @extend .text-nowrap;
  }

  .btn:not(.btn-sm) {
    @extend .py-2;
  }
  .btn-sm {
    @extend .py-1;
  }
}

.select2-container--open {
  z-index: 1060;
}

.bulk-edit-panel {
  top: 59px;

  @media (min-width: 768px) {
    top: 0px;
  }
}

.card-lg {
  .with-filters, turbo-frame {
    table {
      thead {
        th:first-child {
          border-top-left-radius: 0;
        }
        th:last-child {
          border-top-right-radius: 0;
        }
      }
    }
  }
}

.pagination-container {
  border-top: 1px solid $table-border-color;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;

  position: sticky;
  bottom: 0;
  background-color: $card-bg;
  z-index: 100;
  border-bottom-left-radius: $card-border-radius;
  border-bottom-right-radius: $card-border-radius;

  .page-link {
    @extend .btn;
    @extend .btn-sm;
    @extend .btn-light;
    @extend .ml-1;
    @extend .p-2;
  
    .ti {
      @extend .mr-0;
    }
  }
  .page-item.disabled {
    cursor: not-allowed;
    opacity: 0.2;
  }
}